<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        终结：
        1、想让Vue工作。就必须创建一个Vue实例，且要传日一个配置对象；
        2、app容器里面的代码依然符合html规范。只不过混入一些特殊的Vue语法；
        3、app容器里面的代码被称为【Vue模板】
        4、一个Vue实例不能接管多个app容器（控制太不报错）。一个app容器也不能被多个Vue实例接管。
        5、真实开发中只有一个Vue实例。并且会配合着组件一起使用
        6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
        7、一旦data中的数据发生改变。那么页面中用到该数据的地方也会自动更新
        注意区分：js表达式 和 js代码(语句)
            1、表达式：一个表达式会产成一个值。可以放在任何一个需要值得地方；
                (1). 赋值变量 a
                (2). 四则运算表达式 a+b
                (3). 函数调用表达式 demo(1)
                (4). 三元表达式 x === y?'a':'b';
            2、js代码(语句)
                (1). if(){}
                (2). for(){}
        js表达式时特殊得js代码(语句)

     -->
    <div class="app">
        <!-- 插值{{}} -->
        <p @click="handleClick">Hello,{{name.toUpperCase()}},{{address}},{{Date.now()}}</p>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '.app',//document.getElementById('app')
            data: {
                name: 'Fairy',
                address: '上海',
                age: '18'
            },
            methods: {
                handleClick() {
                    this.title += 1
                }
            },
        })
    </script>
</body>

</html>